<!-- 工资发放 -->
<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--用户数据-->
            <el-col :span="20" :xs="24">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    :inline="true"
                    label-width="68px"
                >
                    <el-form-item label="部门名称" prop="sourceName">
                        <el-input
                            v-model="queryParams.sourceName"
                            placeholder="请输入部门名称"
                            clearable
                            size="small"
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="培训名称" prop="trainName">
                        <el-input
                            v-model="queryParams.trainName"
                            placeholder="请输入培训名称"
                            clearable
                            size="small"
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="培训时间">
                        <el-date-picker
                            v-model="dateRange"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    >导出</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    icon="el-icon-refresh"
                    size="mini"
                    @click="refresh"
                    >刷新</el-button
                >
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="trainList">
            <!--    <el-table-column type="selection" width="55" align="center" />-->
            <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center"
            >
                <template slot-scope="scope">
                    <span>{{
                        (queryParams.pageNum - 1) * queryParams.pageSize +
                            scope.$index +
                            1
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="培训名称" align="center" prop="trainName" />
            <el-table-column
                label="培训类型"
                align="center"
                prop="trainType"
                :formatter="trainType"
            />
            <el-table-column
                label="培训开始时间"
                align="center"
                prop="trainStartTime"
                :formatter="timeFormatter"
            />
            <el-table-column
                label="部门名称"
                align="center"
                prop="sourceName"
            />
            <el-table-column label="创建人" align="center" prop="createUser" />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-tickets"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:post:edit']"
                        >详情</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { trainList, updateTrainRecord } from "../../../api/system/train";
import { getToken } from "@/utils/auth";
export default {
    name: "train",
    data () {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            trainList: [],
            dateRange: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            inoutTable: false,
            // 状态数据字典
            statusOptions: [],
            // 基站编号
            postOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                trainName: "",
                trainStartTime: "",
                trainEndTime: "",
                sourceName: ""
            },
            handleUpdate (row) {
                this.$router.push({
                    path: '/train/detail',
                    query: {
                        train: row
                    }
                })
            }
        }
    },
    created () {
        this.getList();
    },
    methods: {
        timeFormatter (row) {
            return row.trainStartTime ? row.trainStartTime.split(' ')[0] : row.trainStartTime
        },
        /** 查询岗位列表 */
        getList () {
            this.loading = true;
            trainList(this.queryParams).then(response => {
                this.trainList = response.data;
                this.total = response.total;
                this.loading = false;
            });
        },

        refresh () {
            this.loading = true;
            updateTrainRecord().then(response => {
                this.getList();
            });
        },
        // 岗位状态字典翻译
        trainType (row, value) {
            if (row.trainType === 1) {
                return "安全培训"
            } else if (value === 2) {
                return "喊话记录"
            } else if (value === 3) {
                return "交底记录"
            } else {
                return "技能培训"
            }
        },
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.page = 1;
            this.queryParams.trainStartTime = this.dateRange[0];
            this.queryParams.trainEndTime = this.dateRange[1];
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },

        /** 导出按钮操作 */
        handleExport () {
            this.$confirm('是否确认导出所有岗位数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return exportByDate();
            }).then(response => {
                this.download(response.msg);
            }).catch(function () { });
        },
    }
};
</script>
